<template>
  <div id="app">
    <!-- <transition :name="transitionName"> -->
      <keep-alive :exclude="keepAliveArray">
        <router-view :check-login="viewData" class="child-view"></router-view>
      </keep-alive>
    <!-- </transition> -->
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      viewData: '',
      transitionName: 'slide-left',
      keepAliveArray: [
        'AddCard', 'ActivityDetail', 'ActivityComment', 'ActivityGrab', 'ActivityDel', 'ReportDetail',
        'ReportDetailShare', 'MyReportAdd', 'MyReportAdd', 'BroadCastDetail', 'BuyDetail', 'SellDetail',
        'GoodsDetail', 'HelperDetail', 'HuiDetail', 'HuiMine', 'OrderDetail', 'SellOrderDetail',
        'WalletDetail', 'Pay', 'PayPlatform', 'Wallet', 'LljPay', 'MallDetail', 'Mall', 'TurnTable',
        'Robot', 'RedPacket', 'RobotReport', 'WithdrawCash'
      ]
    }
  },
  watch: {
    '$route' (to, from) {
      const toLevel = to.meta.level.toString()
      const fromLevel = from.meta.level === undefined ? '0' : from.meta.level.toString()
      if (toLevel.length === fromLevel.length) {
        if (toLevel > fromLevel) {
          this.transitionName = 'slide-left'
        } else if (toLevel < fromLevel) {
          this.transitionName = 'slide-right'
        }
      } else if (toLevel.length > fromLevel.length) {
        this.transitionName = 'slide-left'
      } else if (toLevel.length < fromLevel.length) {
        this.transitionName = 'slide-right'
      }
    }
  },
  methods: {
    toLogin (redirect) {
      const _this = this
      this.$post('/vue/welcome/if_login', '').then(function (data) {
        const except = ['ReportDetail', 'TakeGoods']
        if (except.indexOf(_this.$route.name) !== -1) {
          return false
        }
        if (isNaN(Number(data))) {
          if (data === 'weixin') {
            window.location.href = `http://www.bettercard.cn/vue/welcome/index.html?flag_user=${_this.$route.query.flag_user}&redirect=${redirect}`
          } else {
            _this.$router.push({name: 'Login', query: {redirect: redirect}})
          }
        }
        _this.viewData = data
      })
    }
  },
  updated () {
    let redirect = this.$route.fullPath
    if (this.$route.name !== 'Login') {
      this.toLogin(redirect)
    }
  }
}
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);

  * {
    margin:0;
    padding: 0;
    -webkit-text-size-adjust:none;
    -webkit-tap-highlight-color: transparent;
  }
  li{
    list-style: none;
  }
  a{
    text-decoration: none;
  }
  input,textarea{
    outline: none;
  }
  textarea{
    resize:none;
    border:none;
  }
  a,input,label{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  button, html input {
    -webkit-appearance: button;
    cursor: pointer;
    font-family: "微软雅黑",Helvetica, sans-serif;
  }
  select{
    outline: none;
  }
  img{
    width: 100%;
    height: 100%;
    border: none;
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  /* 更改mint-ui的loading样式 */
  .mint-indicator-spin {
    display: table;
    margin: 0 auto;
    width: auto;
    height: auto;
    line-height: 0;
  }
  /* ---进入离开页面动画--- */
  .child-view {
    position: absolute;
    width:100%;
    height: 100%;
    transition: all .8s cubic-bezier(.55,0,.1,1);
  }
  .slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(50px, 0);
    transform: translate(50px, 0);
  }
  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-50px, 0);
    transform: translate(-50px, 0);
  }
  /* ------ messagebox ------ */
  .mint-msgbox-wrapper {
    .mint-msgbox {
      // background: linear-gradient(to right, rgba(252, 252, 252, 0.8), rgba(255, 255, 255, 0.5));
      background-color: @c-235;
      border-radius: 12px;
      width: 72vw;
      .mint-msgbox-header {
        .mint-msgbox-title {
          color: #000;
          font-size: 17px;
          font-weight: normal;
        }
      }
      .mint-msgbox-content {
        border-bottom: 1px solid rgba(53,53,53,0.25);
        padding: 15px 20px;
        min-height: auto;
        .mint-msgbox-message {
          font-size: 13px;
          line-height: 22px;
          color: #777;
          .red {
            color: @c-red;
          }
          .blue {
            color: @c-blue;
          }
        }
        .mint-msgbox-input {
          display: flex;
          justify-content: center;
          padding: 0;
          input {
            flex: 0 0 65%;
          }
          .mint-msgbox-errormsg {
            display: none;
          }
        }
      }
      .mint-msgbox-btns {
        .mint-msgbox-btn {
          background-color: transparent;
        }
        .mint-msgbox-cancel {
          border-right: 1px solid rgba(53,53,53,0.25);
        }
      }
    }
  }
</style>
